<template>
	<view class="container">

		<!-- 标题 -->
		<view class="title">
			<text>{{ activity.activityTitle }}</text>
		</view>

		<!-- 活动图片 -->
		<view class="image-container">
			<image class="activity-image" :src="activity.activityImage" mode="aspectFill"></image>
		</view>

		<!-- 活动描述 -->
		<view class="description">
			<text>{{ activity.activityMessage }}</text>
		</view>
		<!-- 截止时间 -->
		<view class="time">
			截止时间: {{activity.activityStopTime}}
		</view>
		<!-- 参与按钮 -->
		<view class="button-container">
			<view class="join-btn" :class="joinClass" @click="joinActivity">
				{{ joinText }}
			</view>
		</view>

		<view class="example-body">
			<button class="button_show" @click="showDrawer('showLeft')">
				<text class="word-btn-white">查看参与的人员</text>
			</button>
			<uni-drawer ref="showLeft" mode="left" :width="200">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="close">
						总人数：{{activity_attend_users.length}}
					</view>
					<view class="close" v-for="(item,index) in activity_attend_users" :key="item.userId">
						<uni-list-chat :avatar-circle="true" :title="item.nickname" :avatar="item.image"
							:note="'账号：'+item.account"></uni-list-chat>
					</view>
				</scroll-view>
			</uni-drawer>
		</view>

	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			this.activity = this.getActivitiesId(option.id);
			console.log("参数id：" + option.id); //打印出上个页面传递的参数。
			this.get_activity_attend(this.user.userId)
			this.get_activity_attend_users(this.activity.activityId)
		},
		data() {
			return {
				activity: {}, //这次活动的数据
				activity_attend_users: [], //参与这个活动的人
			};
		},
		methods: {
			...mapMutations('user', ['get_activity_attend']),
			//查看参与人员
			showDrawer(e) {
				this.$refs[e].open()
			},

			// 参与活动的方法
			joinActivity() {
				// console.log([this.activity.activityId, this.userId])
				if (!this.getSure_isJoined) {
					uni.request({
						url: 'http://localhost:3000/admin/activity_attend',
						method: 'post',
						data: [this.activity.activityId, this.user.userId],
						success: (res) => {
							console.log("插入数据：", res);
							uni.showToast({
								title: `你已成功参与活动！`,
								icon: "success",
							});
							this.get_activity_attend(this.user.userId)
							this.get_activity_attend_users(this.activity.activityId)
						},
						fail: (res) => {
							console.log("请求失败：", res)
						}
					})
				} else {
					uni.request({
						url: 'http://localhost:3000/admin/activity_attend/delete',
						method: 'post',
						data: [this.activity.activityId, this.user.userId],
						success: (res) => {
							console.log("插入数据：", res);
							uni.showToast({
								title: `你已成功退出活动！`,
								icon: "success",
							});
							// 获取当前用户参与活动的列表
							this.get_activity_attend(this.user.userId)
							// 获取当前活动的参与人员
							this.get_activity_attend_users(this.activity.activityId)
						},
						fail: (res) => {
							console.log("请求失败：", res)
						}
					})
				}
			},
			// 获取活动的参与人员
			get_activity_attend_users(activity_id) {
				uni.request({
					url: 'http://localhost:3000/users/activity_attend_users',
					method: 'GET',
					data: {
						id: activity_id
					},
					success: (res) => {
						this.activity_attend_users = res.data
						// console.log("res:", res)
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},

		},
		computed: {
			...mapGetters('admin', ['getActivitiesId']),
			...mapState('user', ['user', 'activity_attend']),
			//判断当前用户是否参与此项活动
			getSure_isJoined() {
				return this.activity_attend.some((item, index) => {
					return item.activityId == this.activity.activityId
				})
			},
			// 计算 class
			joinClass() {
				return this.getSure_isJoined ? 'joined' : 'unjoined';
			},
			// 计算按钮文本
			joinText() {
				return this.getSure_isJoined ? '已参与（再次点击退出）' : '点击参与';
			},

		},
		created() {
			// this.get_activity_attend(this.user.userId)
			this.get_activity_attend_users(this.activity.activityId)
		}
	};
</script>

<style scoped lang="scss">
	.container {
		padding: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
	}

	.image-container {
		width: 100%;
		height: 200px;
		/* 根据需要调整图片高度 */
		margin-bottom: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.activity-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 使图片保持比例填充容器 */
	}

	.description {
		font-size: 16px;
		color: #333;
		line-height: 1.5;
		text-align: justify;
		margin-bottom: 20px;
	}

	.button-container {
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
	}

	.join-btn {
		width: 300rpx;
		height: 100rpx;
		border-radius: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 500;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

		/* 未加入状态样式 */
		&.unjoined {
			background-color: #5cd500;
			color: #FFFFFF;
			border: 2rpx solid #4db300;

			&:active {
				transform: scale(0.95);
				opacity: 0.9;
			}
		}

		/* 已加入状态样式 */
		&.joined {
			background-color: #F0F0F0;
			color: #999999;
			border: 2rpx solid #E5E5E5;

			&:active {
				transform: scale(0.95);
			}
		}
	}


	//侧边
	.example-body {
		margin-top: 90rpx;
		padding: 10px;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.info {
		padding: 15px;
		color: #666;
	}

	.info-text {
		font-size: 14px;
		color: #666;
	}

	.info-content {
		padding: 5px 15px;
	}

	.close {
		padding: 10px;
	}

	.button_show {
		border-radius: 40rpx;
		background-color: #F0F0F0;
		border: 3rpx solid #b6b6b6;
	}
</style>
</style>